<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <title>Audio Network - data transmission over sound waves - physical layer carrier example</title>

    <meta name="description" content="Example of restoring carrier's phase and amplitude from raw data samples that contains couple of others frequencies.">

    <link rel="stylesheet" type="text/css" href="../../asset/css/simple-bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../../asset/css/example.css">
    <link rel="stylesheet" type="text/css" href="discrete-fourier-transform-full.css">
    <script src="../../asset/js/site.js"></script>
    <meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body onLoad="startApp()">

    <div id="fb-root"></div>
    <script>
        if (isProduction()) { // TODO refactor this
            (function(d, s, id) {
                var js, fjs = d.getElementsByTagName(s)[0];
                if (d.getElementById(id)) return;
                js = d.createElement(s); js.id = id;
                js.src = "//connect.facebook.net/pl_PL/sdk.js#xfbml=1&version=v2.7&appId=726972757440597";
                fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));
        }
    </script>

    <div class="wrapper">

        <div class="container">
            <h1>Audio Network - send data over sound in JavaScript</h1>
            <div class="row margin-bottom">
                <div class="col col-xs-12">
                    <div class="fb-like-cont">
                        <a href="https://www.facebook.com/Data-transmission-over-sound-500422050157351/" target="_blank" class="a-icon a-icon-fb">
                            <img src="/asset/image/fb.png" alt="Audio Network at Facebook">
                        </a>
                        <div class="fb-like" data-href="https://www.facebook.com/Data-transmission-over-sound-500422050157351/" data-layout="button" data-action="like" data-size="small" data-show-faces="true" data-share="false"></div>
                    </div>
                    <p class="text-right">
                        Return to <a href="https://audio-network.rypula.pl">main page</a>
                    </p>
                    <p class="larger text-center">
                        THIS PROJECT IS STILL UNDER DEVELOPMENT<br/>
                        Source code available at <a href="https://github.com/robertrypula/AudioNetwork" target="_blank">GitHub</a>
                    </p>
                </div>
            </div>

            <!-- ---------------- -->

            <h2 id="section-generic-settings" onClick="onSectionToggleClick('generic-settings')">
                Generic settings
            </h2>
            <div id="section-generic-settings-content">
                <div class="row margin-bottom">
                    <div class="col col-xs-6 col-sm-5 col-md-3">
                        <label for="form-sine-sample-size">
                            Sine Sample Size
                        </label>
                    </div>
                    <div class="col col-xs-6 col-sm-7 col-md-6">
                        <input
                            type="number"
                            id="form-sine-sample-size"
                            onChange="formSineDataChanged()"
                            value=""
                        />
                    </div>
                </div>
            </div>

            <!-- ---------------- -->

            <h2 id="section-separate-sines" onClick="onSectionToggleClick('separate-sines')">
                Separate sines
            </h2>
            <div id="section-separate-sines-content">
                <div class="row margin-bottom">
                    <div class="col col-xs-6 col-sm-5 col-md-3">
                        <label for="form-sine-0-sample-per-period">
                            Sine A - sample per period
                        </label>
                    </div>
                    <div class="col col-xs-6 col-sm-7 col-md-6">
                        <input
                            type="number"
                            id="form-sine-0-sample-per-period"
                            onChange="formSineDataChanged()"
                            value=""
                        />
                    </div>
                </div>
                <div class="row margin-bottom">
                    <div class="col col-xs-6 col-sm-5 col-md-3">
                        <label for="form-sine-0-amplitude">
                            Sine A - amplitude
                        </label>
                    </div>
                    <div class="col col-xs-6 col-sm-7 col-md-6">
                        <input
                            type="number"
                            id="form-sine-0-amplitude"
                            onChange="formSineDataChanged()"
                            value=""
                        />
                    </div>
                </div>
                <div class="row margin-bottom">
                    <div class="col col-xs-6 col-sm-5 col-md-3">
                        <label for="form-sine-0-phase">
                            Sine A - phase (degrees)
                        </label>
                    </div>
                    <div class="col col-xs-6 col-sm-7 col-md-6">
                        <input
                            type="number"
                            id="form-sine-0-phase"
                            onChange="formSineDataChanged()"
                            value=""
                        />
                    </div>
                </div>
                <div class="row margin-bottom">
                    <div class="col col-xs-12">
                        <div class="big-chart">
                            <div id="separate-sine-0"></div>
                        </div>
                    </div>
                </div>

                <div class="row margin-bottom">
                    <div class="col col-xs-6 col-sm-5 col-md-3">
                        <label for="form-sine-1-sample-per-period">
                            Sine B - sample per period
                        </label>
                    </div>
                    <div class="col col-xs-6 col-sm-7 col-md-6">
                        <input
                            type="number"
                            id="form-sine-1-sample-per-period"
                            onChange="formSineDataChanged()"
                            value=""
                        />
                    </div>
                </div>
                <div class="row margin-bottom">
                    <div class="col col-xs-6 col-sm-5 col-md-3">
                        <label for="form-sine-1-amplitude">
                            Sine B - amplitude
                        </label>
                    </div>
                    <div class="col col-xs-6 col-sm-7 col-md-6">
                        <input
                            type="number"
                            id="form-sine-1-amplitude"
                            onChange="formSineDataChanged()"
                            value=""
                        />
                    </div>
                </div>
                <div class="row margin-bottom">
                    <div class="col col-xs-6 col-sm-5 col-md-3">
                        <label for="form-sine-1-phase">
                            Sine B - phase (degrees)
                        </label>
                    </div>
                    <div class="col col-xs-6 col-sm-7 col-md-6">
                        <input
                            type="number"
                            id="form-sine-1-phase"
                            onChange="formSineDataChanged()"
                            value=""
                        />
                    </div>
                </div>
                <div class="row margin-bottom">
                    <div class="col col-xs-12">
                        <div class="big-chart">
                            <div id="separate-sine-1"></div>
                        </div>
                    </div>
                </div>

                <div class="row margin-bottom">
                    <div class="col col-xs-6 col-sm-5 col-md-3">
                        <label for="form-sine-2-sample-per-period">
                            Sine C - sample per period
                        </label>
                    </div>
                    <div class="col col-xs-6 col-sm-7 col-md-6">
                        <input
                            type="number"
                            id="form-sine-2-sample-per-period"
                            onChange="formSineDataChanged()"
                            value=""
                        />
                    </div>
                </div>
                <div class="row margin-bottom">
                    <div class="col col-xs-6 col-sm-5 col-md-3">
                        <label for="form-sine-2-amplitude">
                            Sine C - amplitude
                        </label>
                    </div>
                    <div class="col col-xs-6 col-sm-7 col-md-6">
                        <input
                            type="number"
                            id="form-sine-2-amplitude"
                            onChange="formSineDataChanged()"
                            value=""
                        />
                    </div>
                </div>
                <div class="row margin-bottom">
                    <div class="col col-xs-6 col-sm-5 col-md-3">
                        <label for="form-sine-2-phase">
                            Sine C - phase (degrees)
                        </label>
                    </div>
                    <div class="col col-xs-6 col-sm-7 col-md-6">
                        <input
                            type="number"
                            id="form-sine-2-phase"
                            onChange="formSineDataChanged()"
                            value=""
                        />
                    </div>
                </div>
                <div class="row margin-bottom">
                    <div class="col col-xs-12">
                        <div class="big-chart">
                            <div id="separate-sine-2"></div>
                        </div>
                    </div>
                </div>

                <!-- -- -->
                <div id="separate-sine-3"></div>
                <div id="separate-sine-4"></div>
                <div id="separate-sine-5"></div>
                <div id="separate-sine-6"></div>
                <div id="separate-sine-7"></div>
                <div id="separate-sine-8"></div>
                <div id="separate-sine-9"></div>
                <div id="separate-sine-10"></div>
                <div id="separate-sine-11"></div>
                <div id="separate-sine-12"></div>
                <!-- -- -->

                <div class="row margin-bottom">
                    <div class="col col-xs-6 col-sm-5 col-md-3">
                        <label for="form-white-noise-amplitude">
                            White noise amplitude
                        </label>
                    </div>
                    <div class="col col-xs-6 col-sm-7 col-md-6">
                        <input
                            type="number"
                            id="form-white-noise-amplitude"
                            onChange="formSineDataChanged()"
                            value=""
                        />
                    </div>
                </div>
            </div>

            <!-- ---------------- -->

            <h2 id="section-final-signal" onClick="onSectionToggleClick('final-signal')">
                Final signal - sum of all sines from above and white noise
            </h2>
            <div id="section-final-signal-content">
                <div class="row margin-bottom">
                    <div class="col col-xs-12">
                        <div class="big-chart">
                            <div id="summed-sine"></div>
                            <div class="visualizer-overlay-container">
                                <span class="visualizer-overlay" id="summed-sine-visualizer-overlay"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row margin-bottom">
                    <div class="col col-xs-6 col-sm-5 col-md-3">
                        <label for="form-window-sample-offset">
                            Window sample offset
                        </label>
                    </div>
                    <div class="col col-xs-6 col-sm-7 col-md-6">
                        <input
                            type="number"
                            id="form-window-sample-offset"
                            onChange="formWindowDataChanged()"
                            value=""
                        />
                    </div>
                </div>
                <div class="row margin-bottom">
                    <div class="col col-xs-6 col-sm-5 col-md-3">
                        <label for="form-window-sample-size">
                            Window sample size
                        </label>
                    </div>
                    <div class="col col-xs-6 col-sm-7 col-md-6">
                        <input
                            type="number"
                            id="form-window-sample-size"
                            onChange="formWindowDataChanged()"
                            value=""
                        />
                    </div>
                </div>
            </div>

            <!-- ---------------- -->

            <h2 id="section-time-domain-raw" onClick="onSectionToggleClick('time-domain-raw')">
                Samples from final signal that fits the window
            </h2>
            <div id="section-time-domain-raw-content">
                <div class="row margin-bottom">
                    <div class="col col-xs-12">
                        <div class="big-chart">
                            <div id="time-domain-raw"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- ---------------- -->

            <h2 id="section-window-function" onClick="onSectionToggleClick('window-function')">
                Window function
            </h2>
            <div id="section-window-function-content">
                <div class="row margin-bottom">
                    <div class="col col-xs-6 col-sm-5 col-md-3">
                        <label for="form-window-sample-size" class="label-compact">
                            Window function enabled
                        </label>
                    </div>
                    <div class="col col-xs-6 col-sm-7 col-md-6">
                        <input
                            type="checkbox"
                            id="form-window-function-enabled"
                            onChange="formWindowFunctionDataChanged()"
                            value="1"
                        />
                    </div>
                </div>
                <div class="row margin-bottom">
                    <div class="col col-xs-12">
                        <div class="big-chart">
                            <div id="window-function"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- ---------------- -->

            <h2 id="section-time-domain-processed" onClick="onSectionToggleClick('time-domain-processed')">
                Samples from the window after applying window function
            </h2>
            <div id="section-time-domain-processed-content">
                <div class="row margin-bottom">
                    <div class="col col-xs-12">
                        <div class="big-chart">
                            <div id="time-domain-processed"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- ---------------- -->

            <h2 id="section-frequency-domain" onClick="onSectionToggleClick('frequency-domain')">
                Frequency domain - output of Discrete Fourier Transform
            </h2>
            <div id="section-frequency-domain-content">
                <div class="row margin-bottom">
                    <div class="col col-xs-6 col-sm-5 col-md-3">
                        <label for="form-db-min">
                            Minimal amplitude in decibels
                        </label>
                    </div>
                    <div class="col col-xs-6 col-sm-7 col-md-6">
                        <input
                            type="number"
                            id="form-db-min"
                            onChange="formFrequencyDomainDataChanged()"
                            value=""
                        />
                    </div>
                </div>
                <div class="row margin-bottom">
                    <div class="col col-xs-6 col-sm-5 col-md-3">
                        <label for="form-frequency-bin-size">
                            Frequency bin - size
                        </label>
                    </div>
                    <div class="col col-xs-6 col-sm-7 col-md-6">
                        <input
                            type="number"
                            id="form-frequency-bin-size"
                            onChange="formFrequencyDomainDataChanged()"
                            value=""
                        />
                    </div>
                </div>
                <div class="row margin-bottom">
                    <div class="col col-xs-6 col-sm-5 col-md-3">
                        <label for="form-frequency-bin-sample-per-period-max">
                            SamplePerPeriod max (lowest frequency)
                        </label>
                    </div>
                    <div class="col col-xs-6 col-sm-7 col-md-6">
                        <input
                            type="number"
                            id="form-frequency-bin-sample-per-period-max"
                            onChange="formFrequencyDomainDataChanged()"
                            value=""
                        />
                    </div>
                </div>
                <div class="row margin-bottom">
                    <div class="col col-xs-6 col-sm-5 col-md-3">
                        <label for="form-frequency-bin-sample-per-period-min">
                            SamplePerPeriod min (highest frequency)
                        </label>
                    </div>
                    <div class="col col-xs-6 col-sm-7 col-md-6">
                        <input
                            type="number"
                            id="form-frequency-bin-sample-per-period-min"
                            onChange="formFrequencyDomainDataChanged()"
                            value=""
                        />
                    </div>
                </div>
                <div class="row margin-bottom">
                    <div class="col col-xs-12">
                        <div class="big-chart">
                            <div id="frequency-domain"></div>
                            <div class="visualizer-overlay-container">
                                <span class="visualizer-overlay" id="frequency-domain-visualizer-overlay"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row margin-bottom">
                    <div class="col col-xs-6 col-sm-5 col-md-3">
                        <label for="form-frequency-bin-to-explain-index">
                            Frequency bin index to explain
                        </label>
                    </div>
                    <div class="col col-xs-6 col-sm-7 col-md-6">
                        <input
                            type="number"
                            id="form-frequency-bin-to-explain-index"
                            onChange="formFrequencyBinExplanationDataChanged()"
                            value=""
                        />
                    </div>
                </div>
                <div class="row margin-bottom">
                    <div class="col col-xs-6 col-sm-5 col-md-3">
                        <b class="label">
                            Sample per period
                        </b>
                    </div>
                    <div class="col col-xs-6 col-sm-7 col-md-6">
                        <span id="frequency-bin-sample-per-period"></span>
                    </div>
                </div>
                <div class="row margin-bottom">
                    <div class="col col-xs-6 col-sm-5 col-md-3">
                        <b class="label">
                            Frequency
                        </b>
                    </div>
                    <div class="col col-xs-6 col-sm-7 col-md-6">
                        <span id="frequency-bin-frequency"></span> Hz (assuming sampling rate <span class="SAMPLE_RATE"></span>)
                    </div>
                </div>
                <div class="row margin-bottom">
                    <div class="col col-xs-6 col-sm-5 col-md-3">
                        <b class="label">
                            dB
                        </b>
                    </div>
                    <div class="col col-xs-6 col-sm-7 col-md-6">
                        <span id="frequency-bin-db"></span> dB
                    </div>
                </div>
                <div class="row margin-bottom">
                    <div class="col col-xs-6 col-sm-5 col-md-3">
                        <b class="label">
                            Phase
                        </b>
                    </div>
                    <div class="col col-xs-6 col-sm-7 col-md-6">
                        <span id="frequency-bin-phase"></span> deg
                    </div>
                </div>
                <div class="row margin-bottom">
                    <div class="col col-hidden-at-xs col-sm-5 col-md-3">
                        <b class="label">
                            Constellation diagram
                        </b>
                    </div>
                    <div class="col col-xs-12 col-sm-7 col-md-9">
                        <p>
                            Constellation diagram shows two things at once - amplitude in decibels and phase of the selected
                            frequency bin. If point is far away from chart origin it means that signal is strong, if near
                            origin it means that signal is weak. Position of point on the circle tells about phase.
                        </p>
                        <p>
                            In this example phases are displayed as hands on clock.<br/>
                            At the top (12 o'clock) we have phase offset equal to 0 degrees (or 360 degrees since it's the
                            same). Values goes clockwise so point on the far right side will have 90 degrees phase offset
                            (3 o'clock), point on the far bottom will have 180 degrees phase offset (6 o'clock) and so on.
                        </p>
                        <p>
                            To test that please select frequency bin with peak amplitude and try to manipulate phase
                            of that sine from 'Separate sines' section.
                        </p>
                        <div id="constellation-diagram"></div>
                    </div>
                </div>
            </div>

            <!-- ---------------- -->

            <h2 id="section-frequency-bin-explanation" onClick="onSectionToggleClick('frequency-bin-explanation')">
                Frequency bin explanation
            </h2>
            <div id="section-frequency-bin-explanation-content">
                <div class="row margin-bottom">
                    <div class="col col-xs-12">
                        <p>
                            This section explains how selected frequency bin (via 'Frequency bin index to explain' field) was
                            computed. Only <span class="FREQUENCY_BIN_TO_EXPLAIN_ITERATION_SIZE"></span> iterations were
                            presented because of performance reasons. To compute one frequency bin of course we need to loop
                            thought <b>all iterations</b>!
                        </p>
                        <p>
                            Below you can pick which of those <span class="FREQUENCY_BIN_TO_EXPLAIN_ITERATION_SIZE"></span>
                            iterations are presented. When window function is enabled then it makes much more sense to look
                            for iteration somewhere in the middle of window. Edges are just almost zeroed so you will not find
                            anything interesting there...
                        </p>
                    </div>
                </div>

                <div class="row margin-bottom">
                    <div class="col col-xs-6 col-sm-5 col-md-3">
                        <label for="form-frequency-bin-to-explain-iteration-offset">
                            Explain frequency bin starting from iteration number:
                        </label>
                    </div>
                    <div class="col col-xs-6 col-sm-7 col-md-6">
                        <input
                            type="number"
                            id="form-frequency-bin-to-explain-iteration-offset"
                            onChange="formFrequencyBinExplanationDataChanged()"
                            value=""
                        />
                    </div>
                </div>
                <div class="row margin-bottom">
                    <div class="col col-xs-12">
                        <div class="big-chart">
                            <div id="time-domain-processed-duplicate"></div>
                            <div class="visualizer-overlay-container">
                                <span class="visualizer-overlay" id="time-domain-processed-duplicate-visualizer-overlay"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row margin-bottom">
                    <div class="col col-hidden-at-xs col-sm-5 col-md-3">
                        <b class="label">
                            Data samples zoom:
                        </b>
                    </div>
                    <div class="col col-xs-12 col-sm-7 col-md-6">
                        <div class="big-chart">
                            <div id="time-domain-processed-zoom"></div>
                        </div>
                    </div>
                </div>
                <div class="row margin-bottom">
                    <div class="col col-hidden-at-xs col-sm-5 col-md-3">
                        <b class="label">
                            Iteration details
                        </b>
                    </div>
                    <div class="col col-xs-12 col-sm-7 col-md-9">
                        <div id="frequency-bin-iteration-container" class="clearfix">
                            <div class="frequency-bin-iteration clearfix">
                                <div class="fbi-header">
                                    #<span id="frequency-bin-iteration-label-[[ index ]]"></span>
                                </div>
                                <div class="fbi-chart">
                                    <div id="frequency-bin-iteration-[[ index ]]"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- ---------------- -->

            <script>
                if (isProduction()) { // TODO refactor this
                    document.write('<div class="fb-comments" data-href="' + window.location.href + '" data-numposts="5"></div>');
                }
            </script>

        </div>

        <footer>
            <div class="row">
                <div class="col col-xs-12">
                    <div class="copyright">Robert Rypuła 2015-2018</div>
                </div>
            </div>
        </footer>

    </div>

    <script src="https://cdn.rypula.pl/audio-network/v1.3.2/audio-network-v1.3.2.min.js"></script>

    <script src="init.js"></script>
    <script src="00-separate-sine.js"></script>
    <script src="01-summed-size.js"></script>
    <script src="02-time-domain.js"></script>
    <script src="03-window-function.js"></script>
    <script src="04-time-domain-processed.js"></script>
    <script src="05-dft.js"></script>
    <script src="06-constellation-diagram.js"></script>
    <script src="07-frequency-bin-explanation.js"></script>
    <script src="utils.js"></script>
    <script src="data-bindings-and-handlers.js"></script>
    <script src="boot.js"></script>

    <script>
        if (isProduction()) { // TODO refactor this
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
            })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

            ga('create', 'UA-76662342-1', 'auto');
            ga('send', 'pageview');
        }
    </script>

</body>
</html>
